<template>
  <el-menu
    router
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="sidebar"
    :default-active="activeIndex"
    text-color="#fff"
  >
    <template v-if="list.length">
      <MenuItem
        v-for="(item, index) in list"
        :key="item.id"
        :item="item"
        @update:activeIndex="updateActiveIndex"
      />
    </template>
    <template v-else>
      <el-menu-item>
        <span style="color: #fff;">No menu</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import MenuItem from './MenuItem.vue';
import axiosInstance from '@/axios';

const activeIndex = ref('/index');
const list = ref([]);
const user = ref();

const router = useRouter();
const route = useRoute();

onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("staff"))
  activeIndex.value = route.path;
  getMenu();
});

const getMenu = async () => {
  try {
    const res = await axiosInstance.get("role-menu/getStaffMenu",{
      params: { id: user.value.staffInfo.staff.id } ,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    });
    console.log(res);
    if(res.data.code == 200){
      list.value = res.data.data
      list.value.unshift({
        "id": 1,
        "menuName": "首页",
        "icon": "HomeFilled",
        "sortOrder": 1,
        "permissionCode": "index",
        "parentMenuId": 0,
        "url": "/index",
        "children": []
      },)
    }
  } catch (error) {
    console.log(error);
  }
};

const updateActiveIndex = (index) => {
  activeIndex.value = index;
};
</script>

<style scoped>
.sidebar {
  height: 100%;
  width: 200px;
}
::v-deep .el-menu-item-group__title {
  display: none;
}
</style>
